<template>
  <div>
    <el-dialog
      @close="close"
      class="dialog"
      v-model="commentCheck"
      :title="title"
      width="800px"
      :before-close="handleClose"
    >
      <div class="commentdialog">
        <!-- v-if="!allcomment" -->

        <div class="pinglunlist f-d-c">
          <!-- 当前评论才展示 -->
          <div class="pinglunbox f-d-c" v-if="!allcomment">
            <div class="f-a-c" style="margin-bottom: 18px">
              <img class="userinmg" :src="firstdatalist.image" alt="" />
              <div class="uer f-d-c">
                <span>{{ firstdatalist.userName }}</span>
                <span>{{ firstdatalist.createTime }}</span>
              </div>
            </div>
            <div class="pinglun_item">
              <div class="pingluncontent">
                <span>{{ firstdatalist.detail }}</span>
              </div>
              <!-- <div class="imgbox f-a-c">
                <div class="imglist" v-for="(item, index) in 8" :key="index">
                  <img src="../../../assets/image/113.png" alt="" />
                </div>
              </div> -->
            </div>
            <span class="callbacknumt">{{ total }}条回复</span>
            <commentinput
              v-if="!allcomment"
              :reply="reply"
              @sendType="sendType"
              :parentId="parentId"
              :uid="uid"
            ></commentinput>
          </div>
          <commentinput
            v-if="allcomment"
            :reply="reply"
            @sendType="sendType"
            :parentId="parentId"
            :uid="uid"
          ></commentinput>
          <div class="pinglunlist f-d-c" ref="pinglunlist">
            <div
              class="pinglunbox"
              @scroll="handleScroll"
              style="margin-top: 30px"
              v-for="(item, index) in datalist"
              :key="index"
            >
              <div class="f-a-c" style="margin-bottom: 18px">
                <img class="userinmg" :src="item.image" alt="" />
                <div class="uer f-d-c">
                  <!-- <span v-if="!item.replyUserName">{{
                    item.userName
                  }}</span> -->
                  <span>{{ item.userName }}</span>
                  <span>{{ item.createTime }}</span>
                </div>
              </div>
              <div class="pinglun_item f-d-c">
                <div class="f-d-c huibubox">
                  <div class="pingluncontent">
                    <span>{{ item.detail }}</span>
                  </div>
                  <div
                    class="callback click f-j-a-c"
                    @click="callbacknow(item)"
                  >
                    <span>回复</span>
                  </div>
                </div>
                <!-- <div
                  class="chakan click"
                  v-if="allcomment"
                  @click="chakan(item)"
                ></div> -->
                <div class="demo-collapse" v-if="allcomment">
                  <el-collapse
                    lazy
                    accordion
                    v-model="activeNames"
                    @change="handleChange(item)"
                  >
                    <el-collapse-item
                      v-if="item.childtotal"
                      :title="'共' + item.childtotal + '条回复，点击查看'"
                      :name="index"
                    >
                      <div
                        class="f-d-c"
                        v-for="(items, indexs) in list"
                        :key="indexs"
                      >
                        <div class="pinglunbox f-d-c">
                          <div class="f-a-c" style="margin-bottom: 18px">
                            <img class="userinmg" :src="items.image" alt="" />
                            <div class="uer f-d-c">
                              <span v-if="!items.replyUserName">{{
                                items.userName
                              }}</span>
                              <span v-else
                                >{{ items.userName }} ->
                                {{ items.replyUserName }}</span
                              >
                              <span>{{ items.createTime }}</span>
                            </div>
                          </div>
                          <div class="pinglun_item">
                            <div class="pingluncontent">
                              <span>{{ items.detail }}</span>
                            </div>
                            <div
                              class="callback click f-j-a-c"
                              @click="callbacknow(items)"
                            >
                              <span>回复</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <span v-if="!list.length">加载中</span>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <!-- <div class="imgbox f-a-c">
                  <div class="imglist" v-for="(item, index) in 8" :key="index">
                    <img src="../../../assets/image/113.png" alt="" />
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { showLoading, hideLoading } from "@/utils/loading.js";

import { commentGet } from "@/axios/api.js";

import commentinput from "./commentinput.vue";
import commentList from "./commentList.vue";

import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  watch,
  ref,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    commentinput,
    commentList,
  },
  props: {
    allcomment: {
      type: Boolean,
      default: false,
    },
    commentCheck: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    firstdatalist: {
      type: Object,
      default: {},
    },
  },
  setup(props, { attrs, slots, emit }) {
    const pinglunlist = ref(null);
    watch(
      () => props.firstdatalist,
      (newVal, oldVal) => {
        getnowpinglun(props.firstdatalist.id);
      }
    );
    watch(
      () => props.allcomment,
      (newVal, oldVal) => {
        if (newVal == true) {
          getcommentGet();
        }
      }
    );
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      loading: true,
      reply: {},
      datalist: [],
      total: 0, // 评论数量
      typeID: 0, // 模型id
      list: [],
      activeNames: "",
      callbackinput: false, //输入框开关
      parentId: 0, // 回复id
      uid: "", //用户id
      allcallbackclick: false, // 所有回复
      page: 1,
    });

    let handleChange = (item) => {
      getnowpinglun(item.id, true);
    };
    // 关闭
    let handleClose = () => {
      // data.datalist = [];
      window.removeEventListener("scroll", handleScroll, true);
      emit("drwapop");
      // emit("closeClick");
    };
    // 查看所有评论内容
    // 查询评论数量
    let getcommentnum = (id) => {
      return new Promise((resolve, reject) => {
        let datas = {};
        datas.parentId = id;
        datas.modelId = 0;
        datas.page = 1;
        datas.limit = 10;
        commentGet({
          ...datas,
        }).then((res) => {
          resolve(res.data.total);
        });
      });
    };
    // 评论列表
    let getcommentGet = (gundong) => {
      showLoading();
      if (gundong) {
        data.page++;
      }
      let datas = {};
      datas.parentId = 0;
      datas.page = data.page;
      datas.limit = 10;
      datas.modelId = data.typeID;
      commentGet({
        ...datas,
      }).then(async (res) => {
        let datalist = res.data.records;
        if (datalist) {
          datalist.forEach((item, index) => {
            let nums = item.num;
              datalist[index].childtotal = nums;
          });
          // for (let i = 0; i < datalist.length; i++) {
          //   let nums = await getcommentnum(datalist[i].id);
          //   datalist[i].childtotal = nums;
          // }

          if (data.page == 1) data.datalist = [];
          data.datalist = data.datalist.concat(datalist);
          data.datalist = [...data.datalist];
          hideLoading();
        }
      });
    };
    // 当前评论整合数据
    let getnowpinglun = (id, type) => {
      data.list = [];
      let datas = {};
      datas.parentId = id;
      datas.modelId = 0;
      datas.page = 1;
      datas.limit = 10;
      commentGet({
        ...datas,
      }).then((res) => {
        data.total = res.data.total;
        if (type) {
          data.list = res.data.records;
        } else {
          data.datalist = res.data.records;
        }
      });
    };

    const load = () => {
      console.log(213123);
    };
    let close = () => {
      emit("close");
    };
    onMounted(() => {
      data.page = 1;
      data.typeID = router.currentRoute._value.query.id;
      window.addEventListener("scroll", handleScroll, true);
    });

    onUnmounted(() => {
      window.removeEventListener("scroll", handleScroll, true);
    });
    let sendType = (value) => {
      data.parentId = ''
      data.reply.name = ''
      emit("drwapop");
    };
    let callbacknow = (item) => {
      data.callbackinput = true;
      data.parentId = props.firstdatalist.id;
      data.uid = item.uid;
      data.reply.name = "@" + item.userName;
      // console.log(data.reply.name);
    };
    // 监听滚动
    let handleScroll = (e) => {
      console.log(pinglunlist)

      let scrollTop = pinglunlist.value.scrollTop;
      let clientHeight = pinglunlist.value.clientHeight;
      let scrollHeight = pinglunlist.value.scrollHeight;
      console.log(scrollHeight);
      if (scrollTop + clientHeight >= scrollHeight) {
        // do something
        getcommentGet(true);
      }
    };
    return {
      pinglunlist,
      handleScroll,
      handleChange,
      getcommentnum,
      getcommentGet,
      handleClose,
      getnowpinglun,
      load,
      sendType,
      callbacknow,
      close,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
  border: none;
}
::v-deep .el-collapse-item__header {
  border: none;
}

.chakan {
  text-align: right;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.callbacknumt {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #000000;
}
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f7f9fa;
}

/* 鼠标悬停时滚动条轨道样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
.huifu {
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #000000;
}
.commentdialog {
  height: 900px;
  margin-top: -20px;
}
.dialog {
  border-radius: 20px;
}
.chakan {
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
  }
}
.pinglunlist {
  overflow: auto;

  height: 917px;
  width: 100%;
  .pinglunbox {
    position: relative;
    // height: 336px;
    padding-bottom: 20px;
  }
  .uer {
    margin-left: 10px;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
      &:last-child {
        margin-top: 6px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }
  .userinmg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .pinglun_item {
    width: 100%;
    justify-content: flex-end;
    .huibubox {
    }
    .pingluncontent {
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
    }
    .callback {
      margin-top: 10px;
      width: 50px;
      height: 26px;
      background: #f3f4f5;
      border-radius: 6px 6px 6px 6px;
      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
    .imgbox {
      width: 72%;
      margin-top: 10px;
      flex-wrap: wrap;
      .imglist {
        margin-right: 13px;
        margin-top: 13px;
        > img {
          border-radius: 20px;
          width: 100px;
          height: 100px;
        }
      }
    }
  }
}
</style>
